<template>
	<view>
		<form @submit="formSubmit" report-submit='true'>
			<view class='personal-data'>
				<view class='list' style="margin-top: 1rpx;">
					<view class='item acea-row row-between-wrapper'>
						<view>昵称</view>
						<view class='input acea-row row-between-wrapper' @click="changeInput">
							<input type='text' name='nickname' :value='userInfo.user_nickname' disabled
								class="id"></input>
							<text class='iconfont icon-you'></text>
						</view>
					</view>
					<view class='item acea-row row-between-wrapper'>
						<view>手机号码</view>
						<navigator url="/pages/users/user_modify_phone/index" hover-class="none"
							class='input acea-row row-between-wrapper'>
							<input type='text' disabled='true' name='phone' :value='userInfo.mobile' class='id'></input>
							<text class='iconfont icon-you'></text>
						</navigator>
					</view>
					<view class='item acea-row row-between-wrapper'>
						<view>登录密码</view>
						<view class='input acea-row row-between-wrapper' @click="changePwd">
							<input type='text' placeholder="修改登录密码" disabled='true' class='id'></input>
							<text class='iconfont icon-you'></text>
						</view>
					</view>
					<view class='item acea-row row-between-wrapper'>
						<view>ID号</view>
						<view class='input acea-row row-between-wrapper'>
							<input type='text' :value='userInfo.id' disabled='true' class='id'></input>
							<text class='iconfont icon-suozi'></text>
						</view>
					</view>
					<view class='item acea-row row-between-wrapper'>
						<view>注销账号</view>
						<view class='input acea-row row-between-wrapper' @click="changeCancel">
							<input type='text' placeholder="账号注销后不能恢复" disabled='true' class='id'></input>
							<text class='iconfont icon-you'></text>
						</view>
					</view>
				</view>
				<view class="logOut acea-row row-center-wrapper" @click="outLogin">退出登录</view>
			</view>
		</form>
		<authorize @onLoadFun="onLoadFun" :isAuto="isAuto" :isShowAuth="isShowAuth" @authColse="authColse"></authorize>
	</view>
</template>
<script>
	// +----------------------------------------------------------------------
	// | CRMEB [ CRMEB赋能开发者，助力企业发展 ]
	// +----------------------------------------------------------------------
	// | Copyright (c) 2016~2021 https://www.crmeb.com All rights reserved.
	// +----------------------------------------------------------------------
	// | Licensed CRMEB并不是自由软件，未经许可不能去掉CRMEB相关版权
	// +----------------------------------------------------------------------
	// | Author: CRMEB Team <admin@crmeb.com>
	// +----------------------------------------------------------------------
	import {
		getUserInfo,
		getLogout,
		userOut
	} from '@/api/user.js';
	
	import {
		mapGetters
	} from "vuex";
	
	import authorize from '@/components/Authorize';
	export default {
		components: {
			authorize
		},
		data() {
			return {
				userInfo: {},
				isAuto: false, //没有授权的不会自动授权
				isShowAuth: false, //是否隐藏授权
			};
		},
		onLoad() {

		},
		onShow() {
			let user = uni.getStorageSync('userinfo')
			if (user && user.id>0) {
				this.getUserInfo();
				this.isShowAuth = false
			} else {
				this.isAuto = true;
				this.isShowAuth = true
			}
		},
		methods: {
			formSubmit() {

			},

			// 修改昵称
			changeInput() {
				uni.navigateTo({
					url: '/pages/users/user_nickname/index',
				})
			},

			/**
			 * 授权回调 
			 */
			onLoadFun: function() {
				this.isShowAuth = false;
				this.getUserInfo();
			},
			// 授权关闭
			authColse: function(e) {
				this.isShowAuth = e
			},
			/*
			 * 退出登录
			 *
			 */
			outLogin: function() {
				let that = this;
				uni.showModal({
					title: '提示',
					content: '确认退出登录?',
					success: function(res) {
						if (res.confirm) {
							getLogout()
								.then(res => {
									uni.clearStorageSync('userinfo')
									uni.reLaunch({
										url: '/pages/shops/index/index',
									});
								})
								.catch(err => {
									console.log(err);
								});
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});

			},

			/**修改密码*/
			changePwd() {
				let that = this;
				if (that.userInfo.mobile) {
					uni.navigateTo({
						url: `/pages/users/user_modify_pwd/index`
					})
				} else {
					that.$util.Tips({
						title: '请先绑定手机号'
					});
				}
			},
			//注销账号
			changeCancel() {
				let that = this
				uni.showModal({
					title: '提示',
					content: '确认注销账号?',
					success: function(res) {
						if (res.confirm) {
							userOut()
								.then(res => {
									uni.clearStorageSync('userinfo')
									uni.reLaunch({
										url: '/pages/shops/index/index',
									});
								})
								.catch(err => {
									console.log(err);
								});
						} else if (res.cancel) {

						}
					}
				});
			},
			/**
			 * 获取用户详情
			 */
			getUserInfo: function() {
				let that = this;
				getUserInfo().then(res => {
					console.log(res.data)
					let info = res.data.info[0]
					that.$set(that, 'userInfo', info);

				});
			},


		}
	}
</script>

<style scoped lang="scss">
	html {
		-webkit-text-size-adjust: none;
	}

	.radius {
		margin-top: -35rpx;
		margin-left: 65rpx;
		background-color: white;
		width: 35rpx;
		height: 35rpx;
		border-radius: 50%;
		border: 1px solid rgb(187, 43, 5);
		line-height: 25rpx;
		text-align: center;
		position: absolute;
	}

	.iconfonta {
		border-radius: 50%;
		font-size: 20rpx;
		color: red;
	}

	.avatar {
		width: 120rpx;
		height: 120rpx;
		border-radius: 50%;
	}

	.btnb {
		border-radius: 0;
		height: 100rpx;
		line-height: 100rpx;
	}

	.btna {
		height: 100rpx;
		line-height: 100rpx;
		border-radius: 10rpx 10rpx 0 0;
	}

	.btnc {
		height: 130rpx;
		line-height: 130rpx;
		border-radius: 0;
	}

	.personal-data .wrapper {
		margin: 10rpx 0;
		background-color: #fff;
		padding: 36rpx 30rpx 13rpx 30rpx;
	}

	.personal-data .wrapper .title {
		margin-bottom: 30rpx;
		font-size: 32rpx;
		color: #282828;
	}

	.personal-data .wrapper .wrapList .item {
		width: 690rpx;
		height: 160rpx;
		background-color: #f8f8f8;
		border-radius: 20rpx;
		margin-bottom: 22rpx;
		padding: 0 30rpx;
		position: relative;
		border: 2rpx solid #f8f8f8;
		box-sizing: border-box;
	}

	.t-color {
		color: var(--view-theme);
	}

	.personal-data .wrapper .wrapList .item.on {
		border-color: var(--view-theme);
		border-radius: 20rpx;
		//background-image: url("");
		background-size: 100% 100%;
		background-color: var(--view-minorColor);
		background-repeat: no-repeat;
	}

	.personal-data .wrapper .wrapList .item .picTxt {
		width: 445rpx;
	}

	.personal-data .wrapper .wrapList .item .picTxt .pictrue {
		width: 96rpx;
		height: 96rpx;
		position: relative;
	}

	.personal-data .wrapper .wrapList .item .picTxt .pictrue image {
		width: 100%;
		height: 100%;
		border-radius: 50%;
	}

	.personal-data .wrapper .wrapList .item .picTxt .text {
		width: 325rpx;
	}

	.personal-data .wrapper .wrapList .item .picTxt .text .name {
		width: 100%;
		font-size: 30rpx;
		color: #282828;
	}

	.personal-data .wrapper .wrapList .item .picTxt .text .phone {
		font-size: 24rpx;
		color: #999;
		margin-top: 10rpx;
	}

	.personal-data .wrapper .wrapList .item .bnt {
		font-size: 24rpx;
		background-color: #fff;
		border-radius: 27rpx;
		width: 140rpx;
		height: 54rpx;
		border: 2rpx solid var(--view-theme);
	}

	.personal-data .wrapper .wrapList .item .currentBnt {
		position: absolute;
		right: 0;
		top: 0;
		font-size: 26rpx;
		background-color: var(--view-minorColor);
		width: 140rpx;
		height: 48rpx;
		border-radius: 0 20rpx 0 20rpx;
	}

	.personal-data .list {
		margin-top: 15rpx;
		background-color: #fff;
	}

	.personal-data .list .item {
		padding: 30rpx 30rpx 30rpx 0;
		border-bottom: 1rpx solid #f2f2f2;
		margin-left: 30rpx;
		font-size: 32rpx;
		color: #282828;
	}

	.personal-data .list .item .phone {
		width: 160rpx;
		height: 56rpx;
		font-size: 24rpx;
		color: #fff;
		line-height: 56rpx;
		border-radius: 32rpx
	}

	.personal-data .list .item .pictrue {
		width: 88rpx;
		height: 88rpx;
	}

	.personal-data .list .item .pictrue image {
		width: 100%;
		height: 100%;
		border-radius: 50%;
	}

	.personal-data .list .item .input {
		width: 415rpx;
		text-align: right;
		color: #868686;
	}

	.personal-data .list .item .input .id {
		width: 365rpx;
	}

	.personal-data .list .item .input .iconfont {
		font-size: 35rpx;
	}

	.personal-data .modifyBnt {
		font-size: 32rpx;
		color: #fff;
		width: 690rpx;
		height: 90rpx;
		border-radius: 50rpx;
		text-align: center;
		line-height: 90rpx;
		margin: 76rpx auto 0 auto;
	}

	.personal-data .logOut {
		font-size: 32rpx;
		text-align: center;
		width: 690rpx;
		height: 90rpx;
		border-radius: 45rpx;
		margin: 70rpx auto 0 auto;
		color: #59B8E8;
		border: 1rpx solid #59B8E8;
	}
</style>